<template>
  <el-dialog title="新增权限" :visible="showExcelDialog" @close="noShowDialog">
    <el-form ref="addForm" :rules="rules" :model="formData">
      <el-form-item label="权限名称:" label-width="100px" prop="name">
        <el-input v-model="formData.name" placeholder="请输入权限名称" size="mini" />
      </el-form-item>
      <el-form-item label="权限标识:" label-width="100px" prop="code">
        <el-input v-model="formData.code" placeholder="请输入权限标识" size="mini" />
      </el-form-item>
      <el-form-item label="权限描述:" label-width="100px" prop="description">
        <el-input v-model="formData.description" type="textarea" :rows="3" placeholder="请输入描述内容" />
      </el-form-item>
      <el-form-item label="开启:" label-width="100px">
        <el-switch v-model="formData.enVisible" :active-value="1" :inactive-value="0" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="noShowDialog">取 消</el-button>
      <el-button type="primary" size="mini" @click="addBtn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addPermissionAPI } from '@/api/permission'

export default {
  props: {
    showExcelDialog: {
      type: Boolean,
      default: false
    },
    showExcelDialogId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      formData: {
        name: '', // 权限点名称
        code: '', // 权限点标识
        description: '', // 权限点描述
        enVisible: 0, // 权限点是否开启
        type: 0, // 权限点类型
        pid: 0 // 权限点父级id
      },
      rules: {
        // 权限点名称
        name: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' },
          { min: 2, max: 6, message: '权限在 2 到 6 个字符', trigger: 'blur' }
        ],
        // 权限点标识
        code: [
          { required: true, message: '权限标识不能为空', trigger: 'blur' }
        ],
        // 权限点描述
        description: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 100,
            message: '权限在 2 到 100 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    //   关闭弹层
    noShowDialog() {
      // 关闭弹层
      this.$emit('update:showExcelDialog', false)
      // 重置闯传过来的id数据位null
      this.$emit('update:showExcelDialogId', null)
      this.$refs.addForm.resetFields()
      // 添加成功之后把pid数据重置
      this.formData.pid = 0
    },
    // 点击确认之后所执行的操作
    addBtn() {
      this.$refs.addForm.validate(async valid => {
        if (valid) {
          if (this.showExcelDialogId !== null) {
            this.formData.pid = this.showExcelDialogId
            // 新增接口
            await addPermissionAPI(this.formData)
          } else {
            // 新增接口
            await addPermissionAPI(this.formData)
          }
          this.$message.success('新增成功')
          //   重新加载数据
          this.$emit('uploadData')
          //   关闭弹层
          this.noShowDialog()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
